<template>
  <div class="staffList">

    <div class="content">
      <el-row>
        <div class="debug">{{vm.query}}{{vm.meta}}</div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="8">

          <el-select style="width:100px" size="small" @change="query()" v-model="vm.query.status" placeholder="全部状态">
            <el-option label="启用" value="enable"></el-option>
            <el-option label="禁用" value="disable"></el-option>
          </el-select>


<!--todo 改成select-->
        </el-col>
        <el-col :span="8">
          <el-input size="small" placeholder="按用户名进行搜索" v-model="vm.query.keyword" class="input-with-select">
            <el-button size="small" @click="query()" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3" :offset="5">
          <router-link :to="{ path: 'add'}" append>
            <el-button style="float:right" size="small" type="primary" icon="el-icon-plus">添加用户</el-button>
          </router-link>



        </el-col>
      </el-row>

      <el-table
        ref="staffTable"
        :data="vm.models" stripe border style="width: 100%">
        <!--<template slot="empty">-->
        <!--<div class="mt-loading"><i class="el-icon-loading"></i>-->
        <!--</div>-->
        <!--</template>-->
        <!--<el-table-column type="expand">-->
          <!--<template slot-scope="props">-->
            <!--<span>{{ props.row.description}}</span>-->

          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column

          prop="id"
          label="#"
          width="30">
        </el-table-column>
        <el-table-column

          prop="username"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="base_access"
          label="数据统计"
          align="center"

          width="120">
          <template slot-scope="scope">

            <i v-if="scope.row.base_access" @click="changeRole('base_access',scope.row)" class="el-icon-remove-outline  warning"></i>
            <i v-else @click="changeRole('base_access',scope.row)" class="el-icon-circle-check-outline success"></i>
          </template>
        </el-table-column>
        <el-table-column
        prop="user_management"
        label="用户管理"
        align="center"

        width="120">
        <template slot-scope="scope">

          <i v-if="scope.row.user_management" @click="changeRole(scope.row.user_management)" class="el-icon-remove-outline  warning"></i>
          <i v-else @click="changeRole(scope.row.user_management)" class="el-icon-circle-check-outline success"></i>
        </template>
      </el-table-column>
        <el-table-column
        prop="schema_audit"
        label="方案审核"
        align="center"

        width="120">
        <template slot-scope="scope">

          <i v-if="scope.row.schema_audit" @click="changeRole(scope.row.schema_audit)" class="el-icon-remove-outline  warning"></i>
          <i v-else @click="changeRole(scope.row.schema_audit)" class="el-icon-circle-check-outline success"></i>
        </template>
      </el-table-column>
        <el-table-column
          prop="order_management"
          label="订单管理"
          align="center"

          width="120">
          <template slot-scope="scope">

            <i v-if="scope.row.order_management" @click="changeRole(scope.row.order_management)" class="el-icon-remove-outline  warning"></i>
            <i v-else @click="changeRole(scope.row.order_management)" class="el-icon-circle-check-outline success"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="storage_management"
          label="仓储管理"
          align="center"

          width="120">
          <template slot-scope="scope">

            <i v-if="scope.row.storage_management" @click="changeRole(scope.row.storage_management)" class="el-icon-remove-outline  warning"></i>
            <i v-else @click="changeRole(scope.row.storage_management)" class="el-icon-circle-check-outline success"></i>
          </template>
        </el-table-column>
        <el-table-column
          align="right"
          label="操作"
          >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status=='enable'"
              type="warning"
              size="mini">
             禁用
            </el-button>
            <el-button
              v-if="scope.row.status=='disable'"
              type="success"
              size="mini">
              启用

            </el-button>
            <router-link :to="{ name:'staffEdit',params: { id: scope.row.id }}" append>
              <el-button size="mini">

                编辑
              </el-button>
            </router-link>

            <el-button
              @click="del(scope.row.id)"
              size="mini"
              type="danger">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :current-page="vm.meta.page"
        layout="total,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//  todo 增加路由的参数,配置html5Mode ,导航方法封装
  import Vue from 'vue'
//  import * as Users from '@/api/users'
  import * as Models from '@/api/staff'
//  import {Roles} from '@/config/roles'

  export default{
    name: "staffList",
    computed: {

    },

    components: {

    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query:{}
        },
      }
    },
    computed:{},
    mounted() {
      this.query({reload:true})
    },
    methods: {


      changeRole:function(name,item){
        item[name]=!item[name];

      },
      _reset:function(){
        this.vm.query.page=1;
      },
      query:function(config){

        var that=this;


        if(config&&config.reload){
          that._reset();
        }
        that.vm.models=[];
        that.vm.isLoading=true;
//        todo getRoles.then
        Models.query(that.vm.query).then(function(data){
          that.vm.isLoading=false;
          console.log(data);


          that.vm.models= data.models;

          if(data.meta){
            that.vm.meta={
              page:data.meta.page*1,
              size:data.meta.size*1,
              total:data.meta.total*1

            }
          }
//
//          that.$refs['staffTable'].doLayout();
        }).catch(function(){
          that.vm.isLoading=false;
          that.vm.isError=true;
        });
  //      todo 双向绑定底层方法优化性能 -> set
      },
      pageChange:function(e){
        Vue.set(this.vm.query,'page',e)
        this.query({reload:true});
      },
      del:function(id){
        var that= this
        that.$confirm('删除该用户将无法恢复, 是否确定','警告',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function(){
          Models.del({id:id}).then(function(){
            that.$message({
              type: 'success',
              message: '删除成功!'
            })
          });

        })


      }


    }

  }
</script>
